<template>
	<div class="withdrawal">
		<header>
			<div class="amount">
				<div>可提现佣金（元）</div>
				<span style="font-size: 28px; margin-top: 5px">{{ mainStore.storeIsLogin ? mainStore.storeInfo.member.balance : mainStore.userInfo.balance }}</span>
			</div>

			<div style="margin: 20px 15px">请输入提现金额</div>
			<div class="input">
				<span>￥</span>
				<van-field v-model="state.form.amount" readonly clickable placeholder="0.00" @touchstart.stop="show = true" />
			</div>
			<div class="tip">* 提现不得低于{{ state.withdrawal_lines }}元</div>
			<div class="tip" v-if="state.withdrawal_service_fee">* 提现扣除{{ state.withdrawal_service_fee }}%手续费</div>
		</header>

		<main>
			<div class="title">
        <span>请选择提现账户</span>
        <span @click="add">添加账号</span>
      </div>

			<van-radio-group v-model="state.form.account_id">
				<van-list class="list" v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了">
					<div class="list_item" v-for="item of state.accounts" :key="item.id">
						<van-radio :name="item.id" checked-color="#FA5D8A" icon-size="16px">{{ columns[item.type] }}</van-radio>
						<div>{{ item.account }}</div>
						<div>{{ item.username }}</div>
					</div>
				</van-list>
			</van-radio-group>
		</main>

		<div class="btn" v-if="mainStore.storeIsLogin && mainStore.userInfo.user_id == mainStore.storeInfo.member.user_id">
			<van-button type="primary" size="large" v-debounce="withdrawal">申请提现</van-button>
		</div>
    <div class="btn" v-else-if="!mainStore.storeIsLogin">
      <van-button type="primary" size="large" v-debounce="withdrawal">申请提现</van-button>
    </div>

		<van-number-keyboard
			v-model="state.form.amount"
			:show="show"
			:maxlength="9"
			theme="custom"
			extra-key="."
			close-button-text="完成"
			@blur="show = false"
		/>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useMainStore } from '@/store/index';
import { myWithdrawalAccounts, memberWithdrawalCommission } from '@/api/my';
import { Toast } from 'vant';
import type { ToastOptions } from 'vant';
import {globalConfigValue, memberInfo} from "@/api/common";
import {useRouter} from "vue-router";
import useAuthorize from "@/hooks/authorize";

const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id
	},
	form: {
		user_id: mainStore.user_id,
		amount: '',
		account_id: ''
	},

	loading: false,
	finished: true,
	checked: true,
	accounts: [],
	checkitem: '',
  withdrawal_lines: '',
  withdrawal_service_fee: '',
});
const columns: string[] = ['银行卡'];

const add = () => {
  router.push({ name: 'addAccount' });
};

const show = ref<boolean>(false);

onMounted(() => {
	getMyWithdrawalAccounts();
  getGlobalConfigValueByWithdrawalLines();
  getGlobalConfigValueByWithdrawalServiceFee();
});

const withdrawal = async (): Promise<void | ToastOptions> => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {
    if (mainStore.userInfo.audit_state == 0) return Toast('您的资料正在审核中');
    if (mainStore.userInfo.audit_state == 2) return Toast('您的资料审核未通过');
  } else {
    if ((!mainStore.userInfo?.identity || mainStore.userInfo?.identity == '0')) {
      router.push('/registered');
      return;
    }
  }
	if (!state.form.amount) return Toast('请输入提现金额');
	if (!state.form.account_id) return Toast('请选择提现账户');
	const res = await memberWithdrawalCommission(state.form);
  await getMemberInfo();
	Toast.success(res.errorInfo);
};

// 获取用户信息
const getMemberInfo = async (): Promise<void> => {
  let user_id:number;
  if (mainStore.storeIsLogin) {
    user_id = mainStore.storeInfo.member.user_id
  } else {
    user_id = mainStore.user_id
  }
  const res = await memberInfo(user_id);
  if (res.errorCode == 0 && res.data) {
    mainStore.userInfo = res.data;
  }
};

const getMyWithdrawalAccounts = async () => {
  let user_id:number;
  if (mainStore.storeIsLogin) {
    user_id = mainStore.storeInfo.member.user_id
  } else {
    user_id = mainStore.user_id
  }
	const res = await myWithdrawalAccounts(user_id);
	state.accounts = res.data.dataList;
};

// 最低提现金额
const getGlobalConfigValueByWithdrawalLines = async () => {
  const res = await globalConfigValue('withdrawal_lines');
  state.withdrawal_lines = res.data.item_value;
};

// 提现手续费
const getGlobalConfigValueByWithdrawalServiceFee = async () => {
  await globalConfigValue('withdrawal_service_fee').then((res) => {
    if (res.errorCode == 0) {
      state.withdrawal_service_fee = parseFloat(res.data.item_value) * 100;
    } else {
      console.log(res)
    }
  }).catch((err) => console.log(err));
};
</script>

<style lang="scss" scoped>
.withdrawal {
	min-height: 100vh;
	background: #f7f7f7;
	header {
		padding-top: 15px;
		font-size: 12px;
		background: white;
		.amount {
			@include flx-direction-center;
			align-items: flex-start;
			justify-content: center;
			height: 130px;
			margin: 0 15px;
			padding-left: 20px;
			color: white;
			font-size: 12px;
			background-image: url('@/assets/img/withdrawal_bg.png');
			background-size: cover;
		}
		:deep(.input) {
			@include flx-align-center;
			margin: 0 15px 15px 15px;
			color: #666666;
			font-size: 15px;
			input {
				height: 30px;
				font-size: 23px;
				color: #4d4d4d;
				&::-webkit-input-placeholder {
					color: #4d4d4d;
					font-size: 23px;
				}
			}
		}
		.tip {
			height: 40px;
			padding: 0 15px;
			border-top: 1px solid #e6e6e6;
			font-size: 11px;
			line-height: 40px;
		}
	}
	main {
		.title {
			height: 40px;
			padding-left: 15px;
			padding-right: 15px;
			border-top: 5px solid #f5f5f5;
			border-bottom: 1px solid #e6e6e6;
			color: #666666;
			font-size: 12px;
			line-height: 40px;
			background: white;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
		}
		.list {
			.list_item {
				@include flx-justify-between;
				padding: 15px;
				color: #666666;
				font-size: 12px;
				background: white;
			}
		}
	}
	.btn {
		@include flx-center;
		button {
			width: 86%;
			height: 43px;
			margin: 50px auto;
			border: none;
			border-radius: 22px;
			background: linear-gradient(267deg, #f53d7d, #fb56b3);
		}
	}
}
</style>
